<template>
  <div class="customer-contract-progress">
    <div class="header">
      <div class="header-content d-flex justify-content-between align-items-center">
        <h2>合同进度详情</h2>
        <button @click="goBack" class="btn btn-secondary styled-btn">
          <i class="fa fa-arrow-left mr-2"></i>返回列表
        </button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-indicator">
      <div class="spinner"></div>
      <p>加载合同中...</p>
    </div>

    <!-- 错误消息 -->
    <div v-if="errorMessage && !loading" class="error-message">
      <div class="alert alert-danger">
        <i class="fa fa-exclamation-circle mr-2"></i>{{ errorMessage }}
      </div>
    </div>

    <div v-if="contract && !loading" class="card mt-4">
      <div class="card-body">
        <!-- 合同详情 - 上半部分 -->
        <h3 class="contract-name">{{ contract.name }}</h3>
        <div class="contract-info">
          <p><strong>合同ID:</strong> {{ contract.id }}</p>
          <p><strong>项目经理:</strong> {{ contract.projectManager?.name || '未指定' }}</p>
          <p><strong>客户:</strong> {{ contract.customer?.companyName || '未指定' }}</p>
          <p><strong>合同状态:</strong> {{ contract.status }}</p>
          <p><strong>创建时间:</strong> {{ formatDate(contract.createTime) }}</p>
          <p><strong>更新时间:</strong> {{ formatDate(contract.updateTime) }}</p>
        </div>

        <!-- 进度条 -->
        <div class="progress-section mt-4">
          <h4>合同进度</h4>
          <div class="progress">
            <div
                :class="['progress-bar', getProgressClass(milestoneStatus)]"
                :style="{ width: getProgressWidth(milestoneStatus) }"
            >
              {{ getProgressText(milestoneStatus) }} ({{ milestoneStatus * 25 }}%)
            </div>
          </div>
          <div class="progress-steps mt-3">
            <div class="step" :class="{ active: milestoneStatus >= 1 }">
              <div class="step-indicator">1</div>
              <div class="step-text">未开始</div>
            </div>
            <div class="progress-line" :class="{ active: milestoneStatus >= 2 }"></div>
            <div class="step" :class="{ active: milestoneStatus >= 2 }">
              <div class="step-indicator">2</div>
              <div class="step-text">定金阶段</div>
            </div>
            <div class="progress-line" :class="{ active: milestoneStatus >= 3 }"></div>
            <div class="step" :class="{ active: milestoneStatus >= 3 }">
              <div class="step-indicator">3</div>
              <div class="step-text">执行阶段</div>
            </div>
            <div class="progress-line" :class="{ active: milestoneStatus >= 4 }"></div>
            <div class="step" :class="{ active: milestoneStatus >= 4 }">
              <div class="step-indicator">4</div>
              <div class="step-text">已完成</div>
            </div>
          </div>
        </div>

        <!-- 合同条款 -->
        <div class="clauses-section mt-4">
          <h4>合同条款</h4>
          <div v-if="clauses.length > 0" class="clauses-list">
            <ul class="list-group">
              <li
                  v-for="clause in clauses"
                  :key="clause.id"
                  class="list-group-item"
              >
                <p class="mb-1"><strong>内容:</strong> {{ clause.content }}</p>
              </li>
            </ul>
          </div>
          <div v-else class="empty-message text-center py-2">
            <i class="fa fa-info-circle text-muted mr-2"></i>暂无条款
          </div>
        </div>
      </div>
    </div>

    <!-- 操作区域 - 下半部分（包含支付按钮） -->
    <div v-if="contract && !loading" class="action-area mt-4 card">
      <div class="card-body">
        <h4 class="mb-4">合同进度操作</h4>

        <!-- 操作结果提示 -->
        <div v-if="operationSuccess" class="success-notification mt-6">
          <div class="notification-icon">
            <i class="fa fa-check-circle"></i>
          </div>
          <div class="notification-content">
            <h5 class="notification-title">操作成功</h5>
            <p class="notification-message">{{ operationMessage }}</p>
          </div>
        </div>

        <!-- 支付状态提示（已支付时显示） -->
        <div v-if="depositPaid && milestoneStatus === 2" class="alert alert-success mb-3">
          <i class="fa fa-check-circle mr-2"></i>定金已支付
        </div>
        <div v-if="executionPaid && milestoneStatus === 3" class="alert alert-success mb-3">
          <i class="fa fa-check-circle mr-2"></i>执行款已支付
        </div>

        <!-- 未开始阶段 -->
        <div v-if="milestoneStatus === 1" class="status-1-content">
          <div class="alert alert-warning">
            <i class="fa fa-clock-o mr-2"></i>合同尚未开始！
          </div>
        </div>

        <!-- 定金阶段（显示定金支付按钮） -->
        <div v-if="milestoneStatus === 2" class="status-2-content">
          <div class="form-group mb-4">
            <label for="depositDesc" class="form-label">定金阶段描述</label>
            <!-- 加宽且固定大小的文本框 -->
            <textarea
                id="depositDesc"
                v-model="depositDescription"
                class="form-control wide-fixed-textarea"
                rows="4"
                disabled
                placeholder="无定金阶段描述"
            ></textarea>
          </div>

          <!-- 定金支付按钮 -->
          <button
              v-if="!depositPaid"
              @click="handleDepositPay()"
              class="btn btn-primary mb-3 w-100 styled-btn lift transition-all duration-300"
          >
            <i class="fa fa-credit-card mr-2"></i>支付定金 (金额: {{ depositAmount }})
          </button>

          <!-- 阶段推进按钮 -->
          <button
              @click="openConfirmModal('定金阶段', '确认进入执行阶段?')"
              class="btn btn-primary w-100 styled-btn lift transition-all duration-300"
              :disabled="loading"
          >
            <i class="fa fa-forward mr-2"></i>确认进行下一阶段
          </button>
        </div>

        <!-- 执行阶段（显示执行款支付按钮） -->
        <div v-if="milestoneStatus === 3" class="status-3-content">
          <div class="form-group mb-4">
            <label for="executionDesc" class="form-label">执行阶段描述</label>
            <!-- 加宽且固定大小的文本框 -->
            <textarea
                id="executionDesc"
                v-model="executionDescription"
                class="form-control wide-fixed-textarea"
                rows="4"
                disabled
                placeholder="无执行阶段描述"
            ></textarea>
          </div>

          <!-- 执行款支付按钮 -->
          <button
              v-if="!executionPaid"
              @click="handleExecutionPay()"
              class="btn btn-primary mb-3 w-100 styled-btn lift transition-all duration-300"
          >
            <i class="fa fa-credit-card mr-2"></i>支付执行款 (金额: {{ executionAmount }})
          </button>

          <!-- 阶段推进按钮 -->
          <button
              @click="openConfirmModal('执行阶段', '确认完成合同?')"
              class="btn btn-success w-100 styled-btn lift transition-all duration-300"
              :disabled="loading"
          >
            <i class="fa fa-check mr-2"></i>确认完成
          </button>
        </div>

        <!-- 已完成阶段 -->
        <div v-if="milestoneStatus === 4" class="status-4-content">
          <div class="alert alert-success">
            <i class="fa fa-check-circle mr-2"></i>合同已完成！
          </div>
        </div>

<!--        &lt;!&ndash; 操作结果提示 &ndash;&gt;-->
<!--        <div v-if="operationSuccess" class="success-notification mt-6">-->
<!--          <div class="notification-icon">-->
<!--            <i class="fa fa-check-circle"></i>-->
<!--          </div>-->
<!--          <div class="notification-content">-->
<!--            <h5 class="notification-title">操作成功</h5>-->
<!--            <p class="notification-message">{{ operationMessage }}</p>-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </div>

    <!-- 确认模态框 -->
    <div v-show="confirmModalVisible" class="modal" tabindex="-1" role="dialog" @click.self="confirmModalVisible = false">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">确认操作</h5>
            <button @click="confirmModalVisible = false" class="btn-close" type="button" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>确定要{{ modalTitle }} {{ modalMessage }}</p>
          </div>
          <div class="modal-footer">
            <button @click="confirmModalVisible = false" class="btn btn-secondary styled-btn" type="button">取消</button>
            <button @click="confirmOperation" class="btn btn-primary styled-btn" type="button">确认</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付模态框 -->
    <div v-show="paymentModalVisible" class="modal" tabindex="-1" role="dialog" @click.self="paymentModalVisible = false">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">支付 - {{ paymentTypeText }}</h5>
            <button @click="cancelPayment" class="btn-close" type="button" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="form-group mb-4">
              <label for="paymentAmount" class="form-label">支付金额 (元)</label>
              <input
                  type="number"
                  id="paymentAmount"
                  v-model="paymentAmount"
                  min="0.01"
                  step="0.01"
                  class="form-control"
                  @input="validateAmount"
              >
              <p v-if="amountError" class="text-danger text-sm mt-1">{{ amountError }}</p>
            </div>

            <!-- 支付准备区域 -->
            <div v-if="showPaymentLoading" class="payment-loading-area mt-4 text-center">
              <h4>准备支付中</h4>
              <div class="text-muted">
                <i class="fa fa-spinner fa-spin fa-3x"></i>
                <p class="mt-2">正在创建付款计划...</p>
              </div>
            </div>

            <!-- 支付指引区域 -->
            <div v-if="showPaymentGuide" class="payment-guide-area mt-4 text-center">
              <h4>请在新窗口完成支付</h4>
              <div class="alert alert-info mt-2">
                <i class="fa fa-info-circle mr-2"></i>已为您打开支付宝支付窗口，请使用沙箱版支付宝扫描支付
              </div>
              <p class="mt-2">支付金额: {{ paymentAmount }} 元</p>
              <p class="text-sm text-muted mt-1">请在15分钟内完成支付，支付后将自动更新状态</p>
            </div>

            <!-- 支付状态提示 -->
            <div v-if="paymentSuccess" class="alert alert-success mt-3">
              <i class="fa fa-check-circle mr-2"></i>支付成功！已同步至系统
            </div>
            <div v-if="paymentFailed" class="alert alert-danger mt-3">
              <i class="fa fa-exclamation-circle mr-2"></i>支付失败：{{ paymentFailReason }}
            </div>
            <div v-if="paymentStatusMessage" class="alert alert-info mt-3">
              <i class="fa fa-info-circle mr-2"></i>{{ paymentStatusMessage }}
            </div>
          </div>
          <div class="modal-footer">
            <button
                v-if="!showPaymentLoading && !showPaymentGuide && !paymentSuccess && !paymentFailed"
                @click="generatePaymentForm"
                class="btn btn-primary styled-btn"
                :disabled="!canGeneratePayment"
            >
              <i class="fa fa-paypal mr-2"></i>发起支付
            </button>

            <button
                v-if="(showPaymentLoading || showPaymentGuide || paymentFailed) && !paymentSuccess"
                @click="cancelPayment"
                class="btn btn-secondary styled-btn"
            >
              <i class="fa fa-times mr-2"></i>取消/关闭
            </button>

            <button
                v-if="paymentSuccess"
                @click="closePaymentModal"
                class="btn btn-success styled-btn"
            >
              <i class="fa fa-check mr-2"></i>完成
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  name: 'CustomerContractProgressDetail',
  setup() {
    const route = useRoute()
    const router = useRouter()

    // 后端基础地址
    const baseUrl = 'http://localhost:8080';

    // 核心变量
    const contractId = ref(route.params.contractId)
    const contract = ref(null)
    const clauses = ref([])
    const milestoneStatus = ref(1)
    const loading = ref(true)
    const errorMessage = ref('')

    // 支付相关变量
    const depositAmount = ref('0.00')
    const executionAmount = ref('0.00')
    const depositPaid = ref(false)
    const executionPaid = ref(false)
    const currentOutTradeNo = ref('')

    // 原有变量
    const depositDescription = ref('')
    const executionDescription = ref('')
    const operationSuccess = ref(false)
    const operationMessage = ref('')
    const confirmModalVisible = ref(false)
    const modalTitle = ref('')
    const modalMessage = ref('')

    // 支付模态框变量
    const paymentModalVisible = ref(false)
    const paymentType = ref('')
    const paymentTypeText = ref('')
    const paymentAmount = ref('')
    const showPaymentLoading = ref(false)
    const showPaymentGuide = ref(false)
    const pollingTimer = ref(null)
    const pollingCount = ref(0)
    const maxPollingCount = ref(30)
    const paymentStatusMessage = ref('')
    const paymentSuccess = ref(false)
    const paymentFailed = ref(false)
    const paymentFailReason = ref('')

    // 金额校验相关
    const amountError = ref('')
    const minAmount = ref(0.01)

    // 进度状态映射
    const milestoneStatusMap = {
      1: "未开始",
      2: "定金阶段",
      3: "执行阶段",
      4: "已完成"
    }

    // 获取合同详情
    const fetchContractDetails = () => {
      loading.value = true
      errorMessage.value = ''

      if (!contractId.value) {
        errorMessage.value = '缺少合同ID参数'
        setTimeout(() => router.push('/customer/ongoing-contracts'), 2000)
        loading.value = false
        return
      }

      axios.get(`${baseUrl}/auth/contracts/${contractId.value}/customer-progress`, {
        headers: { 'X-Customer-Id': route.params.customerId || '' }
      })
          .then(response => {
            const data = response.data
            contract.value = data.contract
            milestoneStatus.value = data.milestoneStatus
            depositDescription.value = data.depositDescription || ''
            executionDescription.value = data.executionDescription || ''
            depositAmount.value = data.depositAmount || '0.00'
            executionAmount.value = data.executionAmount || '0.00'
            depositPaid.value = data.depositPaid || false
            executionPaid.value = data.executionPaid || false
          })
          .catch(err => {
            console.error('获取合同详情失败', err)
            errorMessage.value = err.response?.data?.message || '获取合同详情失败，请重试'
          })
          .finally(() => {
            loading.value = false
          })
    }

    // 获取合同条款
    const fetchClauses = () => {
      if (!contractId.value) return
      axios.get(`${baseUrl}/auth/clauses/contract/${contractId.value}`)
          .then(response => clauses.value = response.data)
          .catch(err => console.error('获取合同条款失败', err))
    }

    // 打开支付模态框
    const openPaymentModal = (type) => {
      paymentType.value = type
      paymentTypeText.value = type === 'deposit' ? '定金支付' : '执行款支付'
      paymentAmount.value = type === 'deposit' ? depositAmount.value : executionAmount.value
      resetPaymentStatus()
      paymentModalVisible.value = true
    }

    // 重置支付状态
    const resetPaymentStatus = () => {
      showPaymentLoading.value = false
      showPaymentGuide.value = false
      paymentStatusMessage.value = ''
      paymentSuccess.value = false
      paymentFailed.value = false
      paymentFailReason.value = ''
      currentOutTradeNo.value = ''
      if (pollingTimer.value) clearInterval(pollingTimer.value)
    }

    // 发起支付全流程
    const generatePaymentForm = () => {
      if (!validateAmount()) return

      showPaymentLoading.value = true
      paymentStatusMessage.value = '正在创建付款计划...'

      // 创建付款计划
      axios.post(`${baseUrl}/auth/payment/create-plan`, null, {
        params: {
          contractId: contractId.value,
          amount: paymentAmount.value,
          type: paymentType.value
        }
      })
          .then(createRes => {
            const createData = createRes.data
            if (!createData.success) throw new Error(createData.message || '创建付款计划失败')

            // 发起支付宝支付
            const paymentPlanId = createData.data
            return axios.post(`${baseUrl}/alipay/pay`, {
              paymentPlanId: paymentPlanId,
              customAmount: paymentAmount.value
            })
          })
          .then(payRes => {
            const payData = payRes.data
            if (!payData.success) throw new Error(payData.message || '发起支付失败')

            // 跳转支付宝支付页面
            currentOutTradeNo.value = payData.outTradeNo
            const payForm = document.createElement('form')
            payForm.action = 'https://openapi-sandbox.dl.alipaydev.com/gateway.do'
            payForm.method = 'POST'
            payForm.target = '_blank'

            let formHtml = payData.payForm
            formHtml = formHtml.replace(
                /action="[^"]+"/g,
                'action="https://openapi.alipaydev.com/gateway.do"'
            )
            payForm.innerHTML = formHtml

            document.body.appendChild(payForm)
            payForm.submit()
            document.body.removeChild(payForm)

            // 显示指引并开始轮询
            showPaymentLoading.value = false
            showPaymentGuide.value = true
            paymentStatusMessage.value = '支付窗口已打开，请在15分钟内完成支付'
            startPollingPaymentStatus()
          })
          .catch(err => {
            showPaymentLoading.value = false
            paymentFailed.value = true
            paymentFailReason.value = err.message || '支付初始化失败'
          })
    }

    // 轮询支付状态
    const startPollingPaymentStatus = () => {
      if (pollingTimer.value) clearInterval(pollingTimer.value)
      pollingCount.value = 0

      pollingTimer.value = setInterval(() => {
        pollingCount.value++
        const remaining = maxPollingCount.value - pollingCount.value

        if (pollingCount.value >= maxPollingCount.value) {
          clearInterval(pollingTimer.value)
          showPaymentGuide.value = false
          paymentFailed.value = true
          paymentFailReason.value = '支付超时（15分钟），请重新发起支付'
          return
        }

        // 查询支付状态
        axios.get(`${baseUrl}/auth/payment/check-status/${currentOutTradeNo.value}`)
            .then(statusRes => {
              const statusData = statusRes.data
              if (!statusData.success) {
                paymentStatusMessage.value = `查询支付状态失败（剩余${remaining}次）`
                return
              }

              const { paid } = statusData.data || {}
              if (paid) {
                clearInterval(pollingTimer.value)
                showPaymentGuide.value = false
                paymentSuccess.value = true
                paymentStatusMessage.value = ''
                fetchContractDetails()
              } else {
                paymentStatusMessage.value = `等待支付中（剩余${remaining}次查询）`
              }
            })
      }, 3000)
    }

    // 取消支付
    const cancelPayment = () => {
      resetPaymentStatus()
      paymentModalVisible.value = false
    }

    // 关闭支付模态框
    const closePaymentModal = () => {
      resetPaymentStatus()
      paymentModalVisible.value = false
      fetchContractDetails()
      operationSuccess.value = true
      operationMessage.value = `${paymentTypeText.value}成功！`
    }

    // 定金/执行款支付按钮点击事件
    const handleDepositPay = () => openPaymentModal('deposit')
    const handleExecutionPay = () => openPaymentModal('execution')

    // 阶段推进确认操作
    const confirmOperation = () => {
      confirmModalVisible.value = false
      loading.value = true
      operationSuccess.value = false

      if (milestoneStatus.value === 2) {
        // 定金→执行阶段
        axios.put(`${baseUrl}/auth/contracts/${contractId.value}/customer/next-stage`, { status: 3 })
            .then(() => {
              operationSuccess.value = true
              operationMessage.value = '已确认进入执行阶段'
              fetchContractDetails()
            })
            .catch(error => {
              errorMessage.value = error.response?.data?.message || '更新失败，请重试'
            })
            .finally(() => {
              loading.value = false
            })
      } else if (milestoneStatus.value === 3) {
        // 执行→已完成
        axios.put(`${baseUrl}/auth/contracts/${contractId.value}/customer/complete`, { status: 4 })
            .then(() => {
              operationSuccess.value = true
              operationMessage.value = '已确认完成合同'
              fetchContractDetails()
            })
            .catch(error => {
              errorMessage.value = error.response?.data?.message || '更新失败，请重试'
            })
            .finally(() => {
              loading.value = false
            })
      }
    }

    // 金额输入校验
    const validateAmount = () => {
      amountError.value = ''
      const amount = parseFloat(paymentAmount.value)
      if (!paymentAmount.value || isNaN(amount)) {
        amountError.value = '请输入有效金额'
        return false
      }
      if (amount < minAmount.value) {
        amountError.value = `支付金额不能小于${minAmount.value}元`
        return false
      }
      return true
    }

    // 计算属性：是否可以发起支付
    const canGeneratePayment = computed(() => {
      return validateAmount() && !loading.value
    })

    // 辅助方法
    const openConfirmModal = (title, message) => {
      modalTitle.value = title
      modalMessage.value = message
      confirmModalVisible.value = true
    }
    const goBack = () => router.push('/customer/ongoing-contracts')
    const formatDate = (dateString) => {
      return dateString ? new Date(dateString).toLocaleString() : ''
    }
    const getProgressClass = (status) => {
      switch (status) {
        case 1: return 'bg-warning'
        case 2: return 'bg-info'
        case 3: return 'bg-primary'
        case 4: return 'bg-success'
        default: return 'bg-secondary'
      }
    }
    const getProgressWidth = (status) => `${status * 25}%`
    const getProgressText = (status) => milestoneStatusMap[status] || `未知状态: ${status}`

    // 组件卸载时清理定时器
    onUnmounted(() => {
      if (pollingTimer.value) clearInterval(pollingTimer.value)
    })

    // 页面加载时初始化
    onMounted(() => {
      console.log('组件挂载，初始路由参数:', route.params)
      fetchContractDetails()
      fetchClauses()
    })

    return {
      contractId, contract, clauses, milestoneStatus, loading, errorMessage,
      depositDescription, executionDescription, operationSuccess, operationMessage,
      confirmModalVisible, modalTitle, modalMessage,
      depositAmount, executionAmount, depositPaid, executionPaid,
      paymentModalVisible, paymentTypeText, paymentAmount,
      showPaymentLoading, showPaymentGuide, paymentStatusMessage,
      paymentSuccess, paymentFailed, paymentFailReason,
      currentOutTradeNo, amountError, canGeneratePayment,
      goBack, formatDate, getProgressClass, getProgressWidth, getProgressText,
      openConfirmModal, confirmOperation, handleDepositPay, handleExecutionPay,
      openPaymentModal, generatePaymentForm, cancelPayment, closePaymentModal
    }
  }
}
</script>

<style scoped>
/* 核心：加宽且固定大小的文本框样式 */
.wide-fixed-textarea {
  resize: none !important; /* 禁止调整大小 */
  height: 120px !important; /* 固定高度 */
  min-height: 120px !important;
  max-height: 120px !important;
  width: 100% !important; /* 占满父容器宽度 */
  padding: 12px 15px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ced4da;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wide-fixed-textarea:disabled {
  background-color: #f9f9f9;
  color: #6c757d;
  border-color: #e9ecef;
}

.wide-fixed-textarea:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* 优化按钮样式 */
.styled-btn {
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.25s ease;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 图标与文字间距 */
}

.styled-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.styled-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 按钮颜色优化 */
.btn-primary.styled-btn {
  background-color: #007bff;
  color: white;
}

.btn-primary.styled-btn:hover {
  background-color: #0069d9;
}

.btn-success.styled-btn {
  background-color: #28a745;
  color: white;
}

.btn-success.styled-btn:hover {
  background-color: #218838;
}

.btn-secondary.styled-btn {
  background-color: #6c757d;
  color: white;
}

.btn-secondary.styled-btn:hover {
  background-color: #5a6268;
}

/* 操作成功提示样式优化 */
.success-notification {
  display: flex;
  align-items: flex-start;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid #bbf7d0;
  border-radius: 0.75rem;
  padding: 1.25rem;
  animation: fadeIn 0.5s ease-out, slideUp 0.3s ease-out, fadeOut 0.5s ease-in 3s forwards;
  overflow: hidden;
  position: relative;
}

.success-notification::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: #10b981;
}

.notification-icon {
  flex-shrink: 0;
  margin-right: 1rem;
  margin-top: 0.25rem;
}

.notification-icon i {
  color: #10b981;
  font-size: 2rem;
  background-color: rgba(16, 185, 129, 0.1);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-content {
  flex-grow: 1;
}

.notification-title {
  color: #059669;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.notification-message {
  color: #15803d;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); }
  to { transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

/* 其他原有样式保持不变 */
.header {
  background-color: #f8f9fa;
  padding: 15px 20px;
  border-bottom: 1px solid #dee2e6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
}

.contract-name {
  color: #2c3e50;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.form-label {
  font-weight: 500;
  color: #495057;
  margin-bottom: 8px;
  display: block;
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-top-color: #007bff;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-message {
  padding: 15px;
  color: #721c24;
  background-color: #f8d7da;
  border-radius: 4px;
  margin: 15px 0;
}

.contract-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.contract-info p {
  margin-bottom: 8px;
}

.progress-section {
  margin-top: 30px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  position: relative;
}

.progress-line {
  position: absolute;
  top: 15px;
  left: 30px;
  right: 30px;
  height: 2px;
  background-color: #e9ecef;
  z-index: 0;
}

.progress-line.active {
  background-color: #007bff;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.step-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 5px;
}

.step.active .step-indicator {
  background-color: #007bff;
  color: white;
}

.step-text {
  font-size: 13px;
  color: #6c757d;
}

.step.active .step-text {
  color: #007bff;
  font-weight: 500;
}

.clauses-section {
  margin-top: 30px;
}

.action-area {
  margin-bottom: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.status-2-content, .status-3-content {
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-dialog {
  max-width: 500px;
  width: 100%;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #dee2e6;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #dee2e6;
}

.payment-loading-area, .payment-guide-area {
  padding: 20px 0;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* 动画效果类 */
.lift {
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.transition-all {
  transition: all 0.3s ease;
}

.duration-300 {
  transition-duration: 300ms;
}
</style>